<template>
  <div class="map">
    <!-- <div class="address">{{ addrContent.address }}</div> -->
    <div id="map-container"></div>
    <!-- <div class="search-con">
      <Input placeholder="输入关键字搜索" id="input-map" v-model="mapSearch" />
      <ul>
        <li v-for="(tip, index) in tips" :key="index" @click="selectAddr(tip.location)">
          <p>{{ tip.name }}</p>
          <p>{{ tip.district + tip.address }}</p>
        </li>
      </ul>
    </div> -->
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
// 高德安全密钥
window._AMapSecurityConfig = {
    securityJsCode: '3fd8ee477f50fe18e065eaaa8860e4db',
  };

export default {
  name: 'map',
  data() {
    return {
      config: {
        aMapSecurityJsCode: "3fd8ee477f50fe18e065eaaa8860e4db", // 高德web端js申请的安全密钥
        aMapKey: "2dfe7acaccd80f41b2430c1ea4bfeaeb", //高德web端js申请的api key
      },
      showMap: false, // 地图显隐
      mapSearch: '', // 地图搜索
      map: null, // 初始化地图
      autoComplete: null, // 初始化搜索方法
      geocoder: null, // 初始化地理、坐标转化
      positionPicker: null, // 地图拖拽选点
      tips: [], // 搜索关键字列表
      addrContent: {}, // 回显地址信息
      loading: false // 加载状态
    }
  },
  watch: {
    mapSearch: function (val) {
      this.searchOfMap(val)
    }
  },
  methods: {
    ok() {
      // 确定选择
      this.showMap = false
      this.$emit('getAddress', this.addrContent) //子传父，，
    },
    init() {
      AMapLoader.load({
        key: this.config.aMapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          'AMap.ToolBar',
          'AMap.Autocomplete',
          'AMap.PlaceSearch',
          'AMap.Geolocation',
          'AMap.Geocoder'
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
          // 是否加载 AMapUI，缺省不加载
          version: '1.1', // AMapUI 缺省 1.1
          plugins: ['misc/PositionPicker'] // 需要加载的 AMapUI ui插件
        }
      })
        .then((AMap) => {
          let that = this
          that.map = new AMap.Map('map-container', {
            zoom: 15
          })
          that.map.addControl(new AMap.ToolBar())
          that.map.addControl(new AMap.Autocomplete())
          that.map.addControl(new AMap.PlaceSearch())
          that.map.addControl(new AMap.Geocoder())

          // 实例化Autocomplete
          let autoOptions = {
            city: '全国'
          }
          that.autoComplete = new AMap.Autocomplete(autoOptions) // 搜索
          that.geocoder = new AMap.Geocoder(autoOptions)

          that.positionPicker = new AMapUI.PositionPicker({
            // 拖拽选点
            mode: 'dragMap',
            map: that.map
          })
          that.positionPicker.start()
          /**
           *
           * 所有回显数据，都在positionResult里面
           * 需要字段可以查找
           *
           */
          that.positionPicker.on('success', function (positionResult) {
            that.addrContent = positionResult
            that.$emit('getAddress', positionResult) //子传父，，
          })
        })
        .catch((e) => { })
    },
    setCenter(tip) {
      this.map.setCenter([tip.location.lng, tip.location.lat]);
    },
    setCity(tip) {
      this.map.setCity(tip.adcode);
    },
    setZoom(zoom) {
      this.map.setZoom(zoom);
    },
    searchOfMap(val) {
      // 地图搜索
      let that = this
      this.autoComplete.search(val, function (status, result) {
        // 搜索成功时，result即是对应的匹配数据
        if (status == 'complete' && result.info == 'OK') {
          that.tips = result.tips
          // that.setCity(result.tips[0])
          that.setCenter(result.tips[0])
          that.setZoom(15)

        } else {
          that.tips = []
        }
      })
    },
    selectAddr(location) {
      // 选择坐标
      if (!location) {
        this.$Message.warning('请选择正确点位')
        return false
      }
      const lnglat = [location.lng, location.lat]
      this.positionPicker.start(lnglat)
    }
  },
  mounted() {
    this.init()
  }
}
</script>
<style lang="scss" scoped>
#map-container {
  width: 100%;
  height: 400px;
}

.search-con {
  position: absolute;
  right: 20px;
  top: 64px;
  width: 260px;

  ul {
    width: 260px;
    height: 400px;
    overflow: scroll;

    li {
      padding: 5px;

      p:nth-child(2) {
        color: #999;
        font-size: 12px;
      }

      &:hover {
        background-color: #eee;
        cursor: pointer;
      }
    }
  }
}

.address {
  margin-bottom: 10px;
  // color: $theme_color;
  font-weight: bold;
}
</style>
